<template>
	<view>
		<view v-if="info.banner"><image style="width: 100%;height: auto;" :src="info.banner" mode="widthFix"></image></view>
		<view v-if="info.brief">
			<uni-section :title="info.title" :sub-title="'说明：'+info.brief"></uni-section>
		</view>
		<view class="view-line"></view>
		<view>
			<uni-section :title="'选择：'+sku.title" type="line" @click="onSku"></uni-section>
		</view>
		<view class="view-line"></view>
		<view class="content">
			<view v-html="info.content"></view>
		</view>
		<view class="fixed-bottom">
			<uni-popup ref="popupSku" background-color="#fff" @change="onPopupSku">
				<view class="sku overflow-y" >
					<uni-section :title="sku.title" type="line"></uni-section>
					<uni-card :is-shadow="sku.id == item.id ? true : false" class="mt10 mb-15" v-for="(item,index) in info.skus" :key="item.id" :title="item.title" :sub-title="item.codes" :extra="'单位：'+item.unit+'；规格：'+item.specifications" @click="onClickSku(item)">
						<text class="uni-body">{{item.price_interval}}</text>
					</uni-card>
				</view>
			</uni-popup>
			
			
			<uni-popup ref="popup" background-color="#fff">
				<uni-section class="mb-10" title="集采咨询" type="line"></uni-section>
				<view class="forms overflow-y">
					<uni-forms ref="baseForm" :modelValue="form" label-width="90px">
						<uni-forms-item label="公司名称:" required>
							<uni-easyinput v-model="form.org" placeholder="请输入公司名称" />
						</uni-forms-item>
						<uni-forms-item label="联系人:" required>
							<uni-easyinput v-model="form.name" placeholder="请输入联系人" />
						</uni-forms-item>
						<uni-forms-item label="手机号码:" required>
							<uni-easyinput v-model="form.mobile" placeholder="请输入手机号码" />
						</uni-forms-item>
						<uni-forms-item label="项目名称:">
							<uni-easyinput v-model="form.project" placeholder="请输入项目名称" />
						</uni-forms-item>
						<uni-forms-item label="项目地址:">
							<uni-easyinput v-model="form.address" placeholder="请输入项目地址" />
						</uni-forms-item>
						<uni-forms-item label="采购数量:">
							<uni-easyinput v-model="form.nums" placeholder="请输入采购数量" />
						</uni-forms-item>
					</uni-forms>
					<button class="default-button-push" @click="save()">提交</button>
				</view>
			</uni-popup>
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClickOption" @buttonClick="buttonClick" />
		</view>
		
		<uni-popup ref="popupCustomer" background-color="none">
			<customerVue></customerVue>
		</uni-popup>
		
	</view>
</template>

<script>
	import customerVue from '../../../components/customer.vue'
	export default {
		components: {
			customerVue
		},
		data() {
			return {
				options: [{
					icon: 'paperplane',
					text: '咨询',
					type:'paperplane',
				},
				{
					icon: 'search',
					text: '查看大图',
					type:'bigimage',
				},{
					icon: 'cart',
					text: '我的购物车',
					type:'cart',
				}],
				customButtonGroup: [
					{ icon: 'cart',type: 'cart',text: '加入购物车', backgroundColor: ' #FFCD1E', color: '#333' },
					{ icon: 'shop',type: 'shop',text: '集采咨询', backgroundColor: '#ffc517', color: '#333' },
				],
				id:0,
				form:{org:'',name:'',mobile:'',project:'',address:''},
				info:{banner:'',title:'',create_time:'',click_um:0,content:''},
				sku:{title:''},
				is_cart:false,
				
				shareinfo:{title:'',img:'',path:''}
			}
		},
		onLoad(options){
			this.id = options.id
			this.onGetInfo()
		},
		methods: {
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/product/info/'+_this.id,'POST',{}).then(res => {
					res.data.content = _this.$func.onImgStyle(res.data.content);
					// res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
					_this.info = res.data
					_this.info.img = _this.info.banner
					_this.sku = _this.info.skus[0]
					
					_this.shareinfo.title = _this.info.title
					_this.shareinfo.img = res.data.banner
				}).catch(err => {
					console.log(err)
				})
			},
			onClickSku(data){
				this.sku = data
			},
			onClickOption(e){
				if(e.content.type == 'bigimage'){
					this.$func.bigImage(this.info.content)
				}
				if(e.content.type == 'cart'){
					this.onLink('/pages/cart/cart',0)
				}
				
				if(e.content.type == 'paperplane'){
					this.$refs.popupCustomer.open('center')
				}
			},
			onPopupSku(e){
				this.is_cart = e.show
			},
			buttonClick(e) {
				if(e.content.type == 'cart'){
					this.$refs.popup.close()
					this.$refs.popupSku.open('bottom')
					if(this.is_cart == true){
						this.is_cart = false
						return false
					}
					let _this = this
					this.$request_api('applet_api/cart_item/store','POST',{product_sku_id:this.sku.id,amount:1,type:0}).then(res => {
						if(res.code == 200){
							uni.showToast({title: '加入购物车成功',icon: 'success',duration: 2000})
						}else{
							uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						}
						
					}).catch(err => {
						console.log(err)
					})
				}
				
				if(e.content.type == 'shop'){
					this.$refs.popupSku.close()
					this.$refs.popup.open('bottom')
				}
			},
			save(){
				let _this = this
				if(!this.form.org){
					uni.showToast({title: '请输入公司名称',icon: 'error',duration: 2000})
					return;
				}
				if(!this.form.mobile){
					uni.showToast({title: '请输入电话',icon: 'error',duration: 2000})
					return;
				}
				if(!this.form.name){
					uni.showToast({title: '请输入联系人',icon: 'error',duration: 2000})
					return;
				}
				this.form.is_cart = false
				this.form.id = this.id
				this.form.sku_id = this.sku.id
				this.$request_api('applet_api/product/form','POST',this.form).then(res => {
					if(res.code != 200){
						uni.showToast({title: res.msg,icon: 'error',duration: 2000})
						return;
					}
					_this.form = {}
					uni.showToast({title: '提交成功,近期我们会联系您',icon: 'success',duration: 2000})
					this.$refs.popup.close()
				}).catch(err => {
					console.log(err)
				})
			},
			onSku(e) {
				this.$refs.popupSku.open('bottom')
			},
			onLink(url,id){
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 15px 15px 100px 15px;}
.fixed-bottom{background-color: #FFF;}
.sku{padding: 30px 15px 60px 15px;;max-height: 500px;overflow-y: auto;}
.forms{padding: 30px 15px 60px 15px;}
</style>
